<template>
  <fieldset>
    <legend>商品列表Product</legend>
    <h1>Product</h1>
    <ul>
      <li v-for="item in products" :key="item.id">
        <b>名称:{{ item.title }}</b>
        ------
        <b>价格:{{ item.price }}</b>
        ------
        <b>库存:{{ item.inventory }}</b>
        ------
        <button @click="addCartFn(item)" :disabled="item.inventory === 0">
          加入购物车
        </button>
      </li>
    </ul>
  </fieldset>
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex"
export default {
  computed: {
    ...mapState("product", ["products"])
  },
  methods: {
    ...mapMutations("cart", ["SET_CART"]),
    ...mapMutations("product", ["DECREASE_PRODUCT"]),
    ...mapActions("product", ["FETCH_PRODUCT"]),
    addCartFn(item) {
      this.SET_CART(item)
      this.DECREASE_PRODUCT(item)
    }
  },
  mounted() {
    this.FETCH_PRODUCT()
  }
}
</script>
